<template>
    <div>
        <div class="cart" @mouseenter="showCart" @mouseleave="hideCart">
            <div v-show="$store.state.cart.length == 0">
                <img src="~/assets/img/common/none.png" alt="">
            </div>
            <div v-for="(item, index) in $store.state.cart" :key="index" :cartGoods="item" class="suspension-item">
                <div class="choose">
                    <input type="checkbox" v-model="item.isChoose" @click="changeState(index)">
                </div>
                <img :src="item.showUrl" alt="" class="show-img" @click="goDetail(item.id)">
                <div class="num"><i class="el-icon-remove" :class="{edit: item.num >1}" @click="editCartGoods(false,item)"></i>{{item.num}}
                    <i class="el-icon-circle-plus" :class="{edit: item.num < item.stock}" @click="editCartGoods(true, item)"></i></div>
                <div class="desc" @click="goDetail(item.id)">
                    <p>{{item.name}}</p>
                    <p class="detail-desc"><span>参数：{{item.params}}</span><span>价格：<span class="price">￥{{item.price * item.num}}</span></span></p>
                </div>
                <div class="del" @click="delCartGoods(item)">
                    <i class="el-icon-delete"></i>
                </div>
            </div>
            <div class="settlement" v-show="!$store.state.cart.length == 0">
                <p>共&nbsp;{{$store.getters.chooseCart}}&nbsp;件商品&nbsp;&nbsp;<span class="money">￥{{$store.getters.money}}</span></p>
                <el-button size="mini" type="primary" @click="settlement">去结算</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import SuspensionItem from "./SuspensionItem";

    import {eventBus} from "../../../common/util";
    import {sendwithpost} from "../../../network/profile";
    import {debounce} from "../../../common/util";

    export default {
        name: "Suspension",
        components: {
          SuspensionItem
        },

        methods: {
            showCart() {
                eventBus.$emit('showCart')
            },
            hideCart() {
                eventBus.$emit('hideCart')
            },
            goDetail(id) {
                if (this.$route.query.goodsId === id) {
                    return
                } else {
                    this.$router.push({path: '/detail',query: {
                            goodsId: id,
                        }})
                }
            },
            delCartGoods(goods) {
                if (window.confirm(`确定移除${goods.name}？`)) {
                    sendwithpost({
                        url: '/delCartGoods',
                        data: {
                            goodsId: goods.id,
                            params: goods.params
                        }
                    }).then(res=> {
                        this.$message({
                            message: res.data.message,
                            showClose: true
                        })
                        if (res.data.res_code == 2) {
                            this.$store.commit('delCartGoods', res.data.num)
                        }
                    })
                }else {
                    return
                }
            },
            editCartGoods(plus,goods) {
                if (plus) {
                    if (goods.num < goods.stock) {
                        debounce(this.editFunction(plus, goods))
                    } else {
                        this.$message({
                            showClose: true,
                            message: '购买数量多于库存',
                            type: 'warning'
                        })
                    }
                }else {
                    if (goods.num > 1) {
                        debounce(this.editFunction(plus, goods))
                    }
                }
            },
            editFunction(plus,payload) {
                sendwithpost({
                    url: '/editCartGoods',
                    data: {
                        plus,
                        id: payload.id,
                        params: payload.params
                    }
                }).then(res=> {
                   if (res.data.res_code == 2) {
                       if (plus) {
                           payload.num++
                       }else {
                           payload.num--
                       }
                   }
               })
            },
            settlement() {
                this.$router.push({path:'/settlement'})
            },
            changeState(num) {
                this.$store.commit('changeCartState', num)
            }
        }
    }
</script>

<style scoped>
    .cart {
        width: 500px;
        max-height: 700px;
        min-height: 180px;
        background-color: #ffffff;
        position: fixed;
        overflow:auto;
        z-index: 20;
        top: 100px;
        right: 50px;
        padding-bottom: 40px;
    }
    .suspension-item {
        border-bottom: 1px dashed rgb(204, 204, 204);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        cursor: pointer;
        padding: 0 10px;
    }
    .suspension-item > * {
        margin: 0 5px;
    }
    .suspension-item img {
        padding: 10px;
        width: 100px;
        height: 100px;
    }
    .suspension-item .desc {
        flex: 1;
    }
    .suspension-item .del {
        font-size: 20px;
    }
    .suspension-item .detail-desc {
        display: flex;
        justify-content: space-between;
    }
    .suspension-item .price {
        color: rgb(255, 63,0);
    }
    .suspension-item .num .edit {
        margin: 0 3px;
    }
    .suspension-item .num .edit:hover {
        background-color: #000000;
        color: #ffffff;
        border-radius: 50%;
    }
    .settlement {
        display: flex;
        justify-content: space-between;
        height: 40px;
        padding: 0 4em;
        align-items: center;
        font-size: 0.85em;
        background-color: rgb(68,64,65);
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    }
    .settlement p {
        color: #ffffff;
    }
    .settlement .money {
        color: rgb(255, 63, 0);
    }
</style>